<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的嵌套</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>


<div id="app">
    <router-view></router-view>
</div>

<script>

    //  在user组件中添加的 <myrouter-view></myrouter-view>也是路由的出口    user组件下子路由的出口
    const user = {
        template: `
            <div>
                <h1>用户信息列表展示</h1>
                <myrouter-view></myrouter-view>
                <button @click="add">添加</button>
                <button @click="edit">编辑</button>
            </div>
        `,
        methods: {
            add() {
                this.$router.push({path: '/add'})
            },
            edit() {
                this.$router.push({path: '/edit'})
            }
        }
    }


    const adduser = {
        template: `
            <h1>用户信息添加页</h1>
        `
    }

    const edituser = {
        template: `
            <h1>用户信息编辑页</h1>
        `
    }


    const routes = [
        {
            path: "/user",
            component: user,
            children:[
                {
                    path: "/add",
                    component: adduser
                },
                {
                    path: "/edit",
                    component: edituser
                }
            ]
        }
    ]

    const myrouter = new VueRouter({routes})

    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })
</script>
</body>
</html>
